<template>
	<view>
		
			<!-- 维修信息 -->
			<view class="Info">
			维修信息
			</view>
			<view class="context">
				维修单号:
				<text>3535252</text>
			</view>
			<!-- 车主姓名 -->
			<view class="context">
				车主姓名:
				<text>张三</text>
			</view>
			<!-- 联系方式 -->
			<view class="context">
				联系方式: 
				<text>15713764454</text>
			</view>
			<image src="../../static/dianhua.png" class="image1"></image>
			<!-- 维修方式 -->
			<view class="context">
				维修方式: 
				
				<text>上门取车/到店维修</text>
			</view>
			<!-- 取车位置 -->
			<view class="context">
				取车位置: 
				<text>山阳区32号</text>
			</view>
			<image src="../../static/daohang.png" class="image2"></image>
			<!-- 预约日期 -->
			<view class="context">
				预约日期: 
				
				<text>2022/11/10 11:00</text>
			</view>
			<!-- 预约日期 -->
			<view class="context">
				预约日期: 
				
				<text>2022/11/10 11:00</text>
			</view>
			<!-- 提交日期 -->
			<view class="context">
				预约日期: 
				
				<text>2022/11/10 11:00</text>
			</view>
			
			<view class="Info">
				车辆信息
			</view>
			<!-- 车辆类型 -->
			<view class="context">
				车辆类型: 
				
				<text>大客车</text>
			</view>
			<!-- 车牌号 -->
			<view class="context1">
				车牌号: 
				
				<text>豫J45323</text>
			</view>
			<view class="vehiclePhoto">
				整车照片:
				<image src="../../static/che.jpg"></image>
			</view>
			<view class="repairPhotos">
				维修部位照片:
				<image src="../../static/che.jpg"></image>
				<image src="../../static/che.jpg"></image>
				<image src="../../static/che.jpg"></image>
			</view>
			<button v-if="isConfirm" class="button1" @click="confirmAttendance">确认到场</button>
			<button v-else class="button2" >已到场</button>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isConfirm:true
			}
		},
		methods: {
			confirmAttendance(){
				this.isConfirm = false
			}
			
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	.button1{
		top: 250px;
		width: 214px;
		height: 34px;
		line-height: 34px;
		border-radius: 8px;
		background-color: rgba(29,111,255,1);
		color: rgba(255,255,255,1);
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		position: relative;
	}
	.button2{
		top: 250px;
		width: 214px;
		height: 34px;
		line-height: 34px;
		border-radius: 8px;
		background-color: rgba(154,154,154,1);
		color: rgba(255,255,255,1);
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		position: relative;
	}
	.image1{
		top: 98px;
		left: 320px;
		width: 35px;
		height: 35px;
		position: absolute;
	}
	.image2{
		
		top: 160px;
		left: 325px;
		width: 28px;
		height: 28px;
		position: absolute;
	}
	.Info{
		margin-bottom: 10px;
		left: 22px;
		top: 10px;
		width: 64px;
		height: 23px;
		line-height: 23px;
		color: rgba(16,16,16,1);
		font-size: 16px;
		font-weight: bold;
		text-align: left;
		
		position: relative;
	}
	.context{
		top: 7px;
		left: 34px;
		height: 30px;
		line-height: 30px;
		
		font-size: 14px;
		text-align: left;
		position: relative;
	}
	.context1{
		top: 7px;
		left: 34px;
		height: 30px;
		line-height: 30px;
		
		font-size: 14px;
		text-align: left;
		position: relative;
	}
	.context text{
		left: 65px;
		position: relative;
	}
	.context1 text{
		left: 80px;
		position: relative;
	}
	.vehiclePhoto{
		top: -43px;
		left: 34px;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		text-align: left;
		position: relative;
	}
	.vehiclePhoto image{
		left: -55px;
		top: 90px;
		width: 101px;
		height: 69px;
		background-color: rgba(229,229,229,1);
		position: relative;
	}
	.repairPhotos{
		top: 40px;
		left: 34px;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		text-align: left;
		position: relative;
	}
	.repairPhotos image{
		
		left: -90px;
		margin-left: 8px;
		top: 90px;
		width: 101px;
		height: 69px;
		background-color: rgba(229,229,229,1);
		position: relative;
	}

</style>
